<template>
  <div>
    <h1>【aty-upload】 component demo</h1>
    <p>【aty-upload】 本质</p>
    <aty-row class="fd-upload-box">
      <aty-row>
        <aty-title level="4">1.【aty-upload】基础点击上传 </aty-title>
        <aty-upload action="/ArteryAPI/form/upload/upload1/upload"  :limit="3" />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-upload】多选 # </aty-title>
        <aty-upload multiple action="/ArteryAPI/form/upload/upload2/upload"
                    :limit="3"
                    :on-exceed="handleExceed" />
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-upload】拖拽上传 # </aty-title>
        <aty-upload multiple
                    type="drag"
                    action="//jsonplaceholder.typicode.com/posts/">
          <div style="padding: 20px 0">
            <aty-icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
            <p>点击或将文件拖拽到这里上传</p>
          </div>
        </aty-upload>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-upload】带标签  </aty-title>
        <aty-upload multiple action="/ArteryAPI/form/upload/upload2/upload"

                    :label="'label'"
                    :labelWidth="80"
                    :labelPosition="'right'"
                    prop="label"
                    :required="true"
                    :min="20"
                    :showMessage="true" />
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-upload】随表单一起提交  </aty-title>
        <aty-form class="inputBar" :data="user" ref="form">
          <aty-input label="姓名" v-model="user.name" required style="width:300px" />
          <aty-upload ref="upload" action="#" accept=".jpg" submit-with-form submit-param-name="files"  >
            <aty-button text="上传jpg头像" type="dashed" icon="ios-cloud-upload-outline" />
          </aty-upload>
          <!--<aty-image :src="image" v-show="visiable" class="imageStyle"></aty-image>-->
          <aty-form-item>
            <aty-button type="primary" @click="submit" text="提交" />
          </aty-form-item>
        </aty-form>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-upload】预览  </aty-title>
        <aty-upload :default-file-list="fileList" :on-preview="preview" action="/ArteryAPI/form/upload/upload2/upload"></aty-upload>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
  data () {
    return {
      user: {},
      fileList: [
        {
          name: 'avatar.jpg',
          url: '/static/images/avatar.jpg'
        },
        {
          name: 'photo.jpg',
          url: '/static/images/photo.jpg'
        }
      ]
    }
  },
  methods: {
    handleExceed (files, fileList) {
      Artery.message.warning({
        content: `当前最大允许上传个数为3，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        duration: 10,
        closable: true
      })
    },
    submit () {
      this.$refs.upload.validate()
      return
      this.$refs.form.submit('form/upload/upload7/addUser').then((result) => {
        if (result.success) {
          Artery.message.info('服务器处理成功')
          this.visiable = false
        }
        this.user = {}
      }).catch((error) => {
        this.user = {}
        /*
         * 此错误有以下几种情况
         * 1. url参数未指定，可以在submit传递或者form中指定url属性
         * 2. 表单参数格式校验未通过
         * 3. axios发送请求失败的error
         */
        Artery.message.error(error)
      })
    },
    preview(file) {
      Artery.open({url: file.url, target: "_blank"})
    }
  }
}
</script>
<style lang="less" type="text/less">
    .fd-upload-box {
        margin: 0 20px;
        text-align:left;
        >.aty-row {
             padding-bottom: 10px;
         }
    }
</style>
